<template>
  <div>
    <!-- 食物知识库 -->
    <h1>食物知识库</h1>
    <el-form :inline="true">
      <el-form-item label="">
        <el-input v-model="searchForm.food" placeholder="食物关键词">
        </el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="searchForm.sick" placeholder="疾病关键词"></el-input>
      </el-form-item>
      <el-button class="search" type="success" @click="getKnowledge()"
        >查询</el-button
      >
      
    </el-form>

    <!-- 显示食物表格 -->
    <div class="user_self">
      <el-table
      ref="multipleTable"
      :data="knowledgeList"
      tooltip-effect="dark"
      style="width: 100%"
    >
    <el-table-column label="食物名称" prop="name" width="150">
    </el-table-column>
    <el-table-column label="糖类/g" prop="glucose" width="150">
    </el-table-column>
    <el-table-column label="蛋白质/g" prop="protein" width="150">
    </el-table-column>
    <el-table-column label="脂肪/g" prop="fat" width="150">
    </el-table-column>
    <el-table-column prop="inorganicSalt" label="微量元素/g" width="150">
    </el-table-column>
    <el-table-column label="卡路里/g" prop="calorie" width="150"></el-table-column>
    <el-table-column label="疾病不宜" prop="sick" width="200"></el-table-column>
    <el-table-column label="描述" prop="description" > </el-table-column>
      
    </el-table>
    </div>

    

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100]"
      :current-page="current"
      :page-size="size"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
const isNum = (rule, value, callback) => {
      const price = /^[0-9]*$/;
      if (!price.test(value)) {
        callback(new Error("含量请取整数！"));
      } else {
        callback();
      }
    };
import { mapState } from "vuex";
export default {
  name: "Food2",
  data() {
    return {
      total: 0,
      size: 10,
      current: 1,
      knowledgeList: [],
      addForm: false,
      searchForm: {
        food: "",
        sick:""
      },
      action: "https://jsonplaceholder.typicode.com/posts/",
      mode: {},
      modeList: [],
      typeList: [],
      knownledge: {},
      allList:{},
      formRules: {
        name: [{ required: true, message: "请输入食物名称", trigger: "blur" }],
        glucose: [
          { required: true, message: "请输入糖类含量", trigger: "blur" },
          {
            validator: isNum,
            message: "糖类含量请估算为整数",
            trigger: "blur",
          },
        ],
        protein:[
          {required: true, message:"请输入蛋白质含量",trigger:"blur"},
          {
            validator: isNum,
            message: "蛋白质含量请估算为整数",
            trigger: "blur",
          },
        ],
        fat:[
          {required: true, message:"请输入脂肪含量",trigger:"blur"},
          {
            validator: isNum,
            message: "脂肪含量请估算为整数",
            trigger: "blur",
          },
        ],
        inorganicSalt:[
          {required:true, message:"请输入微量元素含量",trigger:"blur"},
          {
            validator: isNum,
            message: "微量元素含量请估算为整数",
            trigger: "blur",
          },
        ],
        calorie:[
          {required:true,message:"请输入卡路里含量",trigger:"blur"},
          {
            validator: isNum,
            message: "卡路里含量请估算为整数",
            trigger: "blur",
          },
        ]
      },
    };
  },
  methods: {
    modeUpload: function (item) {
      console.log(item.file);
      this.mode = item.file;
    },
    upload: function() {
      let fd = new FormData()
      fd.append('file', this.mode)
      this.$axios.post('/sys/food/load', fd, {
         headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
         this.$message.success(res.data.data);
         this.searchForm = {}
         this.getKnowledge()
      })
    },
    handleClose() {
      this.resetForm();
    },
    resetForm() {
      this.addForm = false;
      this.knownledge = {};
    },
    getKnowledge() {
      this.$axios
        .get("/sys/food/list", {
          params: {
            name: this.searchForm.food,
            sick: this.searchForm.sick,
            current: this.current,
            size: this.size,
          },
        })
        .then((res) => {
          this.knowledgeList = res.data.data.records;
          this.size = res.data.data.size;
          this.current = res.data.data.current;
          this.total = res.data.data.total;
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post(
              "/sys/food/" + (this.knownledge.id ? "update" : "save"),
              this.knownledge
            )
            .then((res) => {
              this.getKnowledge();
              this.$message({
                showClose: true,
                message: res.data.data,
                type: "success",
                onClose: () => {
                  this.resetForm();
                },
              });
            });
          this.addForm = false;
        }
      });
    },
    editHandle(id) {
      this.$axios.get("/sys/food/info/" + id).then((res) => {
        this.knownledge = res.data.data;
        this.addForm = true;
      });
    },
    delHandle(id) {
      this.$axios.get("/sys/food/delete?id=" + id).then((res) => {
        this.getKnowledge();
        this.$message({
          showClose: true,
          message: res.data.data,
          type: "success",
        });
      });
    },
    handleSizeChange(val) {
      this.size = val;
      this.getKnowledge();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getKnowledge();
    },
    download(){
      console.log(this.$axios.defaults.baseURL);
      window.location.href = this.$axios.defaults.baseURL + "/sys/food/download"
    }
  },
  created() {
    this.getKnowledge();
  },
};
</script>

<style scoped>
.update {
  display: inline;
  margin-left: 10px;
  margin-right: 10px;
}
.el-table {
  font-size: 18px;
}

</style>